import React, { Component } from 'react'

import root from '../../index'
// 类组件
class Demo extends Component {

    state = {count: 0}

    add = () =>{
        this.setState(state =>{
          return {count: state.count + 1}
        })
    }

    unmout = () => {
      root.unmount()
    }

    showInput = () => {
       alert(this.myRef.value)
    }

    componentDidMount(){
      this.temr = setInterval(() => {
        this.add()
      }, 1000)
    }

    componentWillUnmount(){
      clearInterval(this.temr)
    }

  render() {
    return (
      <div>
        <input ref={c => this.myRef = c}></input>
        <h1>当前求和为{this.state.count}</h1>
        <button onClick={this.add}>+1</button>
        <button onClick={this.unmout}>卸载组件</button>
        <button onClick={this.showInput}>点位展示input</button>
      </div>
    )
  }
}

// function Demo(){
//   const [count, setCount] = React.useState(0)
//   const myRef =  React.useRef()
//   React.useEffect(() => {
//      let temr = setInterval(()=> {
//       add()
//      }, 1000)
//      return () => {
//       // 在组件卸载前执行
//       console.log('###')
//       clearInterval(temr)
//      }
//   }, [])

//   const add = () => {
//     // setCount(count + 1)
//     setCount(count => count + 1)
//   }
//   const unmout = () => {
//       root.unmount()
//   }
//   const showInput = () => {
//     alert(myRef.current.value)
//   }
//   return(
//     <div>
//       <input ref={myRef}></input>
//     <h1>当前求和为{count}</h1>
//     <button onClick={add}>+1</button>
//     <button onClick={unmout}>卸载组件</button>
//     <button onClick={showInput}>点位展示input</button>
//   </div>
//   )
// }

export default Demo